<template>
  <div class='container'
  >
    <!-- 添加目录对话框 -->
  <el-dialog
  v-if="this.propsvlaue.subjectID==''"
  title="新增目录"
  :visible="showdialog"
  width="30%"
  @close='btncancle'
  >
  <el-form ref="ruleform" :model="form" label-width="80px" :rules="rules">
    <el-form-item label="所属学科" >
    <el-select  placeholder="请选择" v-model="form.subjectID" >
      <el-option :label="item.label" :value="item.value" v-for="item in subjectlists" :key='item.value'></el-option>
      <!-- <el-option label="区域二" value='beijing'></el-option> -->
    </el-select>
  </el-form-item>
  <el-form-item label="目录名称" prop='name'>
    <el-input placeholder="请输入目录名称" style='width:220px' v-model="form.name"></el-input>
  </el-form-item>
   <el-row type="flex" justify="end">
    <el-col :span='12' :push='2' > 
    <el-button @click='btncancle'>取 消</el-button>
    <el-button type="primary" @click='subimit'>确 定</el-button>
  </el-col>
  </el-row>
  </el-form>
</el-dialog>
<!-- 编辑目录对话框 -->
  <el-dialog 
  v-else
  title="编辑目录"
  :visible="showdialog"
  width="30%"
  @close='editbtncancle'
  >
  <el-form ref="ruleform" :model="propsvlaue" label-width="80px">
    <el-form-item label="所属学科" >
    <el-select  placeholder="请选择" v-model="propsvlaue" >
      <el-option :label="propsvlaue.subjectName" :value="propsvlaue.subjectName" disabled></el-option>
      <!-- <el-option label="区域二" value='beijing'></el-option> -->
    </el-select>
  </el-form-item>
  <el-form-item label="目录名称" >
    <el-input placeholder="请输入目录名称" style='width:220px' v-model="propsvlaue.tagName"></el-input>
  </el-form-item>
   <el-row type="flex" justify="end">
    <el-col :span='12' :push='2' > 
    <el-button @click='editbtncancle'>取 消</el-button>
    <el-button type="primary" @click='editsubimit'>确 定</el-button>
  </el-col>
  </el-row>
  </el-form>
</el-dialog>
  </div>
</template>

<script>
// 导入标签列表函数
import {list} from '@/api/hmmm/tags'
// 导入修改标签的函数
import { update } from '@/api/hmmm/tags'
import { add } from '@/api/hmmm/tags'
// 导入学科列表函数
import { simple } from '@/api/hmmm/subjects'
export default {
  // 导入表单验证函数
  data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('内容不能为空'))
          }
        }
    return {
       form: {
          name: '',
          region: '',
         subjectID: ''
        },
         subjectlists:[],
          rules: {
            name: [
             { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 12, message: '长度在 3 到 15 个字符', trigger: 'blur' }
          ],
             sname: [
             { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 12, message: '长度在 3 到 15 个字符', trigger: 'blur' }
          ]
        },
        sss:[]
    }
  },
  created() {
    this.tagslist()
    this.subject()
  },
  props: {
    showdialog:{
      type: Boolean,
      default: false
    },
    propsvlaue: {
      type:[Object,String],
      required:true
    }
  },
  methods: {
  subimit () {
    
     this.$refs.ruleform.validate(async isok=>{
       if(isok) {
      // alert('存在数据')
      // 调用接口封装函数
      await add({
        subjectID: this.form.subjectID,
        tagName: this.form.name  
      })
      this.$message('添加成功')
      //  this.$parent.list()
      //  this.$parents.showdialog = false
      // this.$parent.btnok()
      this.$emit('addtagslist')
      this.$emit('btnok')
       }
     }) 
    },
    btncancle() {
      this.form ={
        name:'',
        region:''
      }
      this.$refs.ruleform.resetFields()
      this.$emit('btncancle')
    },
  async  subject() {
    const {data} = await simple()
    console.log(data);
    this.subjectlists = data
    console.log(this.subjectlists);
    },
    editbtncancle () {
    // alert('123')
    this.$refs.ruleform.resetFields()
      this.$emit('editbtncancle')
  },
  async editsubimit() {
    await update({
      id:this.propsvlaue.id,
      subjectID:this.propsvlaue.subjectID,
      tagName: this.propsvlaue.tagName
    })
    this.$parent.tagslist()
    this.$message('数据更新成功')
    this.$emit('btnok')
  },
 async tagslist() {
   const {data} = await list()
   console.log(data);
   this.sss=data.items
  }
  } 
}
</script>

<style scoped lang='less'></style>
